<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>生命周期</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <div id="react"> </div>
    <!--准备好一个容器-->
    <!--引入react核心库,核心库必须先引入-->
    <script type="text/javascript" src="./js/17.1js/react.development.js"></script>
    <!--引入react-dom, 用于支持react操作DOM-->
    <script type="text/javascript" src="./js/17.1js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="./js/17.1js/babel.min.js"></script>


    <!--新旧生命周期
        新生命周期中废弃了3个旧的，componentWillMount(组件将要挂载)，componentWillReceiveProps(组件将要接收新的props的钩子),组件将要更新的钩子(组件将要更新)
        引用了两个新的生命周期:getDerivedStateFromProps，getSnapshotBeforeUpdate

        1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
                            1.	constructor()
                            2.	getDerivedStateFromProps
                            3.	render()
                            4.	componentDidMount() =====> 常用
                                            一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
                                            
        2. 更新阶段: 由组件内部this.setSate()或父组件render触发
                            1.	getDerivedStateFromProps()
                            2.  shouldComponentUpdate()
                            3.	render() =====> 必须使用的一个
                            4.	getSnapshotBeforeUpdate
                            5.  componentDidUpdate()



        3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
        
                            1.	componentWillUnmount()  =====> 常用
                                   一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
		
    -->

    <script type="text/babel">

        class Life extends React.Component {

           //初次加载页面时的生命周期
            //(1)构造器
            constructor(props) {
                super(props)
 
                console.log("构造器constructor",)
                   //初始化状态
                  this.state={sum:0}
            }

            //(2)组件将要挂载的钩子
            componentWillMount(){
				console.log("组件将要挂载的钩子")
			}

            //(4)组件挂载完毕的钩子
            componentDidMount(){
             console.log('组件挂载完毕的钩子')
            }

            //(5)组件将要卸载的钩子
            componentWillUnmount(){
                console.log('组件将要卸载的钩子')
                            }


         
           //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
            }
            
            //在更新之前获取快照
			getSnapshotBeforeUpdate(){
				console.log('getSnapshotBeforeUpdate');
				return 'atguigu'
			}

           //（3）组件将要更新的钩子
           componentWillUpdate(){
               console.log("组件将要更新")

           }

           //(4)组件更新完毕的钩子
           componentDidUpdate(){
				console.log('组件更新完毕');
            }
            

        //组件强制更新
        force=()=>{
            this.forceUpdate()
        }


            //自定义赋值函数
            getSum=()=>{
            let {sum} =this.state
            sum =sum+1
            this.setState({sum})
            }

            getXz=()=>{
           //(2)卸载组件
           ReactDOM.unmountComponentAtNode(document.getElementById('react'))
                        
            }

             render() {
                console.log("组件挂载render")
                const {sum}=this.state
                return(
                    <div>
                      <h2>求和案列:{sum}</h2>
                     <button onClick={this.getSum}>求个和</button>
                     <button onClick={this.getXz}>卸载组件</button>
                     <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
             }
            }  
            ReactDOM.render(<Life/>, document.getElementById("react"));
    </script>

</body>

</html>